<template>
  <div>
    <el-dialog :visible="show_details" class="tover-details" width="910px" @close="dialogClose" :modal="false">
      <div class="content-header">
        <div class="header-title">疑似违章建筑监察结果报告</div>
      </div>
      <div class="content-body">
        <div class="reportCon">
          <form class="">
            <div class="report">
              <h1>疑似违章建筑监察结果报告</h1>
              <div class="report-top">
                <div class="report-top-left">
                  <h3>发现日期
                    <em>{{ toverInfo.discoveryDate }}</em>
                  </h3>
                  <div class="report-top-left-img"></div>
                </div>
                <div class="report-top-right">
                  <dl>
                    <dt>类型</dt>
                    <dd>{{ toverInfo.type }}</dd>
                    <dt>布控点</dt>
                    <dd>{{ toverInfo.controlPoint }}</dd>
                    <dt>起建时间</dt>
                    <dd>{{ toverInfo.buildTime }}</dd>
                  </dl>
                  <dl>
                    <dt>案件号</dt>
                    <dd>{{ toverInfo.caseNumber }}</dd>
                    <dt>X 坐标</dt>
                    <dd>{{ toverInfo.Xcoordinates }}</dd>
                    <dt>Y 坐标</dt>
                    <dd>{{ toverInfo.Ycoordinates }}</dd>
                  </dl>
                  <h3>详细地址</h3>
                  <p>{{ toverInfo.address }}</p>
                </div>
              </div>
              <div class="report-center">
                <h3>地图位置</h3>
                <div class="map">
                </div>
              </div>
              <div class="report-center">
                <h3>建筑全貌</h3>
                <div class="map">
                  <!-- <img :src="fileList.url"> -->
                </div>
              </div>
              <div class="report-center">
                <h3>疑似违章取证</h3>
                <div class="map"></div>
              </div>
              <div class="report-center">
                <h3>施工现场</h3>
                <div class="map"></div>
              </div>
              <div class="report-bottom">
                <h3>备注：</h3>
                <p>{{ toverInfo.remarks }}</p>
                <label>提交：</label>
                <label>日期：</label>
                <label>审核：</label>
              </div>
            </div>
            <h2>申请无人机支援需填写</h2>
            <div class="form-item">
              <div class="item-label">
                <label for="image_type">拍摄类型</label>
              </div>
              <div class="item-input">
                <el-select class="" v-model="protype" multiple placeholder="请选择拍摄类型">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
            <div class="form-item">
              <div class="item-label">
                <label for="image_type">其他拍摄类型</label>
              </div>
              <div class="item-input">
                <el-input class="input" v-model="inputype" placeholder="其他拍摄类型"></el-input>
              </div>
            </div>
            <div class="form-footer">
              <div>
                <h2>后台操作记录：</h2>
              </div>
              <div>
                <table>
                  <tbody>
                    <tr>
                      <th>操作时间</th>
                      <th>操作行为</th>
                      <th>操作记录</th>
                    </tr>
                    <tr v-for="(item, index) in res" :key="index">
                      <td>{{ item.time }}</td>
                      <td>{{ item.beha }}</td>
                      <td>{{ item.rec }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      protype: '',
      inputype: '',
      options: [{
        value: '选项1',
        label: '全景'
      }, {
        value: '选项2',
        label: '特写'
      }, {
        value: '选项3',
        label: '视频'
      }],
      res: [
        {
          time: '2012',
          beha: '报告',
          rec: '操作'
        }
      ],
      toverInfo: {
        discoveryDate: '2019-02-15 14:09:00',
        type: '新建',
        controlPoint: '-',
        buildTime: '-',
        caseNumber: 'LGLG-20180315001C',
        Xcoordinates: '114.264701',
        Ycoordinates: '22.744478',
        address: '广东省深圳市龙岗区龙岗街道碧新路2362号',
        remarks: ''
      }
    }
  },
  props: {
    show_details: {
      type: Boolean,
      default: () => false
    }
  },
  methods: {
    dialogClose() {
      this.$emit('update:show_details', false)
      this.$emit('dialogClose')
    }
  }
  // computed: {
  //   ...mapGetters([
  //     'fileList'
  //   ])
  // }
}
</script>

<style lang="less">
.report-top-left {
  width: 280px;
  height: auto;
  float: left;
  border-right: 1px solid #afafaf;
  box-sizing: border-box;

  h3 {
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-bottom: 1px solid #afafaf;

    em {
      color: red;
    }
  }

  .report-top-left-img {
    width: 280px;
    height: 263px;
    padding: 8px 10px;
    border-bottom: 1px solid #afafaf;
  }
}

.report-top-right {
  width: 570px;
  height: auto;
  float: right;
}
</style>
